<template>
	<view class="main">
		<view class="studies">
			<image src="http://www.szzn.group/uploads/20221107/07cdc83eca5d8ec61200d5145c1b04da.png" mode=""></image>
		</view>
		<view class="ld">
			<view class="left">
				<scroll-view :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="clickToId"
					:style="{ height: windowHeight }">
					<view v-for="(item, index) in GardenList" :key="index">
						<view :class="currentNum == index ? 'leftactive' : ''" class="left-title" :id="'to' + index"
							@click="setId(item.id,index)">{{ item.cate_name }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="right" >
				<scroll-view :scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true" :scroll-y="true"
					:style="{ height: windowHeight }" v-if="GardenList.length != 0">
					<view v-for="(item, index) in GardenList" :key="item.id" >
						<view class="title,right_title" :id="'po' + index">
							<view class="list" @click="gardeHorticultureDetail(i.id)" v-for="i in item.child" :key="i.id">
								<view class="">
									<image :src="i.image" mode=""></image>
								</view>
								<!-- <view class="black"></view> -->
								<view class="righttitle">
									<view class="dibu">
										<view class="">{{ i.store_name }}</view>
										<view class="buy">购物</view>
									</view>
									<!-- <view class="">
										<view class="">
											<view class="time-t">预约时间:{{ i.time }}</view>
											<view class="address-a">地址:{{ i.addresss }}</view>
										</view>
										<view class="">购物</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		homeGardenList,
		homeGardenIdList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				GardenList: [
					{
						title: '农技体验',
						list: [{
								name: '农技体验',
								image: '/static/text.png',
								address: '韩国人该如何',
								time: '2008-02-03'
							},
							{
								name: '农技体验',
								image: '/static/text.png',
								address: '韩国人该如何',
								time: '2008-02-03'
							}
						]
					},
				],
				windowHeight: '0px',
				clickId: '',
				clickToId: '',
				currentNum: 0,
				topList: [],
				isLeftClick: false
			};
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '优栽园',
				path: 'page_home/gardenhorticulture/gardenhorticulture'
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '优栽园',
				path: 'page_home/gardenhorticulture/gardenhorticulture'
			};
		},
		onLoad() {
			uni.showLoading({})
			let _that = this;
			uni.getSystemInfo({
				success: function(res) {
					_that.windowHeight = (res.windowHeight - 124) + 'px' 
				}
			});
			this.getNodesInfo();
			this.homeGardenList()
		},
		methods: {
			// 获取分类
			homeGardenList() {
				let data = `group_id=${4}`;
				homeGardenList(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading()
						this.GardenList = res.data.data
						this.init()
					} else {
						uni.hideLoading()
					}
				})
			},
			// 初始化数据
			init() {
				this.setId(this.GardenList[0].id,0)
			},
			// 左侧点击
			setId(id, index) {
				this.clickId = 'po' + index;
				this.isLeftClick = true;
				this.currentNum = index;
				let data = `cId=${id}`;
				uni.showLoading({})
				homeGardenIdList(data).then(res => {
					if(res.data.code == '200'){
						uni.hideLoading()
						this.GardenList.forEach(item => {
							if (item.id == id) {
								this.GardenList[index].child = res.data.data.list
							}
						})
					}else {
						uni.hideLoading()
					}
					
				})
			},
			scroll(e) {
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						this.currentNum = i;
						this.clickToId = 'to' + i;
					}
				}
			},
			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.right_title').boundingClientRect().exec(res => {
						let nodes = res[0];
						let rel = [];
						nodes.map(item => {
							rel.push(item.top);
						});
						this.topList = rel;
					});
			},
			// 果蔬园艺详情
			gardeHorticultureDetail(id) {    
				uni.navigateTo({
					url: '/page_home/gardenhorticulturedetail/gardenhorticulturedetail?id=' + id
				});
			}
		},

	};
</script>

<style lang="less">
	.main {
		background-color: #f0f0f0;
		// height: calc(100vh - 124rpx);
	}

	.studies {
		padding: 20rpx;
		image {
			width: 100%;
			height: 200rpx;
		}
	}

	.leftactive {
		color: #ec6932 !important;
		border-left: 4px solid #ec6932;
	}

	.ld {
		display: flex;

		.left {
			flex: 0.7;
			text-align: center;
			width: 180rpx;

			.title {
				text-align: center;
				height: 100upx;
				line-height: 100upx;
			}

			.left-title {
				padding: 30rpx 20rpx;
				border-bottom: 1px solid #eee;
				background-color: #f7f7f7;
				color: #a5a5a5;
				font-size: 28rpx;
			}
		}

		.right {
			flex: 2;

			.title {
				padding: 20upx;
				// background-color: #fff;
			}

			.item {
				padding-left: 20upx;
				display: inline-block;
				height: 50upx;
			}

			image {
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx 20rpx 0 0 ;
			}

			.righttitle {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10rpx 20rpx 20rpx;

				>view:nth-child(1) {
					font-weight: 700;
					padding: 0 0 15rpx 0;
				}

				>view:nth-child(2) {
					display: flex;
					justify-content: space-between;
					align-items: center;

					>view:nth-child(1) {
						color: #999;
						font-size: 28rpx;
					}

					>view:nth-child(2) {
						color: #fff;
						background-color: #317455;
						font-size: 24rpx;
						padding: 6rpx 30rpx;
						border-radius: 10rpx;
					}
				}
			}

			.list {
				margin-bottom: 20rpx;
				position: relative;
				background-color: #fff;
				border-radius: 20rpx;
			}

			.black {
				position: absolute;
				top: 60%;
				width: 100%;
				background-color: #fff;
				height: 35rpx;
			}
		}
	}
	.time-t {
		opacity: 0;
	}
	.address-a {
		opacity: 0;
	}
	.dibu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		.buy {
			font-size: 26rpx !important;
			background-color: #289958;
			color: #fff;
			border-radius: 10rpx;
			padding: 7rpx 15rpx;
		}
	}
	
</style>
